<template>
  <div class="">
    <p>count is {{ count }} name is {{ name }}</p>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
const count = ref(0)
const name = ref('zhangsan')
const person = ref({
  age: 30,
  sex: '男',
  address: {
    province: '江西省',
    city: '九江市'
  }
})

/**
 * 监听单个简单数据模型【用得多】
 * 参数1：监听的模型值
 * 参数2：回调函数
 */
// watch(count, (val1, val2) => {
//   console.log(val1, val2)
// })

// watch(name, (val1, val2) => {
//   console.log(val1, val2)
// })

/**
 * 监听多个简单数据模型【用得少】
 * 参数1：监听模型的数值
 * 参数2：回调函数
 */
// watch([count, name], (val1, val2) => {
//   console.log(val1, val2)
// })

/**
 * 监听复杂数据模型的属性【用得少】
 * 参数1：必须写成箭头的这种写法
 * 参数2：回调函数
 */
// watch(
//   () => person.value.age,
//   (val1, val2) => {
//     console.log(val1, val2)
//   }
// )

/**
 * 深度监听1 & 立即执行【用得多】
 * 注意：我们要监听 person.value
 */
// watch(person.value, (val1, val2) => {
//   console.log(val1, val2)
// })

/**
 * 深度监听1 & 立即执行【用得多】
 * 注意：我们只监听 person中的address属性的改变
 *
 * 参数1：要监听的对象中的对象属性
 * 参数2：回调函数
 * 参数3：立即监听&立即执行的对象
 */
watch(
  () => person.value.address,
  (val1, val2) => {
    console.log(val1, val2)
  },
  {
    deep: true, // 深度监听
    immediate: true // 立即执行
  }
)
</script>

<style scoped></style>
